<!-- 权限编辑弹窗 -->
<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ mid ? '修改' : '新增' }}权限</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab">权限路径：</span>
          <div :class="{'error_border':tipNum===0}">
            <el-select
              v-model="detailUrl"
              filterable
              allow-create
              @change="getUrl"
              placeholder="请选择权限路径">
              <el-option
                v-for="(item,index) in routeOptions"
                :key="index"
                :label="item.name"
                :value="item.val">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>权限名称：</span>
          <div :class="{'error_border':tipNum===1}">
            <el-input type="text" placeholder="权限名称" v-model.trim="menuName" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>权限级别：</span>
          <div class="group_box" :class="{'error_border':tipNum===2}">
            <el-select
              filterable
              v-model="level"
              @change="setTip('','')"
              placeholder="请选择权限级别">
              <el-option
                v-for="(item,index) in levelOption"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>父级权限：</span>
          <div class="group_box" :class="{'error_border':tipNum===3}">
            <el-cascader
              @change="getParentId"
              v-model="parentMenu"
              :options="menuOptions"
              :props="props"
              clearable>
            </el-cascader>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>排序：</span>
          <div :class="{'error_border':tipNum===4}">
            <el-input type="number" placeholder="请输入排序(如：1、2、3)"
                      v-model.trim="proOrder" :min="1" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab">code：</span>
          <div>
            <el-input type="text" placeholder="请输入code" v-model.trim="code" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line" v-if="level===3">
          <span class="lab">接口类型：</span>
          <div class="group_box">
            <el-select
              filterable
              v-model="methodType"
              @change="setTip('','')"
              placeholder="请选择类型">
              <el-option
                v-for="(item,index) in typeOptions"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line" v-else>
          <span class="lab">菜单类型：</span>
          <div class="group_box">
            <el-select
              filterable
              v-model="menuType"
              @change="setTip('','')"
              placeholder="请选择菜单类型">
              <el-option
                v-for="(item,index) in menuTypeOption"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab">状态：</span>
          <div>
            <el-radio-group v-model="proStatus" @change="setTip('','')">
              <el-radio :label="1">可用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="line">
          <span class="lab">备注：</span>
          <div>
            <el-input type="text" placeholder="请输入备注" v-model.trim="memo" @input="setTip('','')"></el-input>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {addData, updateData, getDetail, getSelect, getWebMenu} from "../../../api/permission";
import {getPlatformCode} from "../../../utils/code";
import {setTree} from "../../../utils/menuAuth";

export default {
  props: ['mid'],
  data() {
    return {
      props: {checkStrictly: true, value: 'id', label: 'name', children: 'childPermissions'},
      routeOptions: [
        {name: '无', val: ''},
      ],
      menuName: '',
      detailUrl: '',
      ids: '',
      menuOptions: [],
      parentMenu: [],
      proStatus: 1,
      proOrder: 1,
      memo: '',
      methodType: '',
      typeOptions: [
        {id: 'GET', name: 'GET'},
        {id: 'POST', name: 'POST'},
        {id: 'PUT', name: 'PUT'},
        {id: 'DELETE', name: 'DELETE'}
      ],
      menuType:1,
      menuTypeOption:[{id: 1, name: '竖向菜单'}, {id: -1, name: '横向菜单'}, {id: 0, name: '双向菜单'}],
      code: '',
      level: 1,
      levelOption: [{id: 1, name: '一级菜单'}, {id: 2, name: '二级菜单'}, {id: 3, name: '按钮'}],
      infoTip: '',
      tipNum: '',
      loading: false
    }
  },
  mounted() {

    this.getParentMenu();
    if (this.mid) {
      this.getDetail();
    }
  },
  methods: {
    // 获取详情
    getDetail() {
      let that = this;
      this.loading = true;
      getDetail(that.mid).then(res => {
        if (res.data) {
          that.setData(res.data);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    // 获取父级菜单
    getParentMenu() {
      let that = this;
      let param = {parentId: -1}
      getSelect(param).then(res => {
        if (res.data&&JSON.stringify(res.data)!=='{}') {
          that.menuOptions = res.data;
        } else {
          that.menuOptions = [];
        }
      })
    },

    // 获取输入路由
    getUrl(val) {
      this.detailUrl = val;
    },

    // 获取父级菜单id
    getParentId(val) {
      let data = '';
      val.forEach((item, index) => {
        data = data + (index > 0 ? ',' : '') + item
      })
      this.ids = data;
    },

    // 回显
    setData(obj) {
      this.menuName = obj.name;
      this.detailUrl = obj.url;
      this.proStatus = obj.enable ? obj.enable : 0;
      this.ids = obj.tmrParentId?obj.tmrParentId:0;
      this.parentMenu = obj.tmrParentId ? JSON.parse('[' + obj.tmrParentId.replace('，', ',') + ']') : [0];
      this.proOrder = obj.sort;
      this.level = obj.level ? obj.level : '';
      this.memo = obj.memo ? obj.memo : '';
      this.methodType = obj.method ? obj.method : '';
      this.menuType  = obj.type ? parseFloat(obj.type) : '';
      this.code = obj.code ? obj.code : '';
    },

    // 确认编辑
    confirmEdit() {
      if (this.menuName === '') {
        this.setTip(1, '输入菜单名称！');
      } else if (this.level === '') {
        this.setTip(2, '请选择权限等级！');
      } else if (this.parentMenu && this.parentMenu.length === 0) {
        this.setTip(3, '请选择父级权限！');
      } else if (this.proOrder === '') {
        this.setTip(4, '请输入排序！');
      } else if (this.proOrder && parseFloat(this.proOrder) % 1 !== 0) {
        this.setTip(4, '排序需为整数！');
      } else if (parseFloat(this.proOrder) <= 0) {
        this.setTip(4, '排序需大于0！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let data = {
        enable: that.proStatus,
        url: that.detailUrl,
        name: that.menuName,
        tmrParentId: that.ids,
        sort: that.proOrder,
        memo: that.memo,
        method: that.methodType,
        type:parseFloat(that.level)===3?1:that.menuType,
        code: that.code,
        level: that.level,
        platformCode:getPlatformCode()
      }
      if (that.mid) {
        data.id = that.mid;
        updateData(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addData(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setResult(finish){
      if (finish){
        this.closePopup(true);
        this.getLeftMenu();
        this.$message.success('操作成功！');
      }
      this.loading = false;
    },

    getLeftMenu(){
      getWebMenu({type: 1,platformCode:getPlatformCode()}).then((res) => {
        if (res.data) {
          setTree(JSON.stringify(res.data))
        }
      })
    },

    // 提示设置
    setTip(num, text) {
      this.tipNum = num;
      this.infoTip = text;
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #60BAE7;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #DCDFE6;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
}

.avatar {
  max-width: 210px;
  min-width: 60px;
  height: 100px;
  display: block;
  border-radius: 6px;
  margin-right: 15px;
  border: 1px solid #bbb;
}
</style>
